<script setup>
import { ref, reactive, watch, h } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { statementApi, statementMultiple } from '@T2/service/api.ts';
import UnitByPosition from '@T2/views/Project/Display/components/tree/unitByPosition.vue';
import Charts from './components/charts.vue'
import AddEditMain from './components/addEditMain.vue';

const Resd = reactive({
  unit: {},
  statementList: [],
});
const unitChange = (data, node) => {
  Resd.unit = data;
  getStatement();
}
const getStatement = () => {
  Resd.statementList = [];
  statementApi({
    method: 'get',
    params: {
      uunit: Resd.unit.id,
      rtype: '分组',
    }
  }).then(res => {
    Resd.statementList = res.results || [];
  });
}


/* 新增编辑弹窗相关 */
const addEditMain = reactive({
  type: '',   //新增、编辑
  content: {},
});
const closeMain = (refresh) => {
  addEditMain.type = '';
  addEditMain.content = {};
  if (refresh) {
    getStatement();
  }
}
</script>

<template>
  <div class="view flex">
    <div class="position">
      <UnitByPosition @current-change="unitChange" />
    </div>
    <div class="card-box flex-column">
      <div class="cards flex flex-wrap scroller-header">
        <div class="cardBox flex-center" v-for="(item, index) in Resd.statementList">
          <Charts :statement="item" />
        </div>
      </div>
    </div>
  </div>
  <AddEditMain
    v-if="addEditMain.type && addEditMain.content.unit?.id"
    :type="addEditMain.type"
    :content="addEditMain.content"
    @close="closeMain"
  />
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
}
.position {
  width: fit-content;
  height: calc(100% - 20px);
  background: transparent;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
}
.card-box {
  width: 100%;
  padding: 20px;
  .cards {
    flex: 1;
    overflow-x: hidden;
    overflow-y: overlay;
    padding: 20px;
    background: linear-gradient( 180deg, #022625 0%, #000000 100%);
  }
}
.cardBox {
  width: calc(100% / 3);
  min-width: 496px;
  margin-bottom: 20px;
}
:deep(.el-message-box__container) {
  display: flex;
}
</style>